<template>
  <el-container style="height: 100%;">
    <el-aside :width="sideWidth + 'px'"
      style="background-color: rgb(238, 241, 246);box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
      <Aside :isCollapse="isCollapse" />
    </el-aside>

    <el-container style="height:100%">
      <el-header style="border-bottom:1px solid #ccc ;background: linear-gradient(rgb(188, 212, 227),rgb(229, 225, 225));">
        <Header :isCollapse="isCollapse" :collapse="collapse" />
      </el-header>
      <el-main style="">
        <router-view></router-view>
        
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Aside from '@/components/Aside.vue';
import Header from '@/components/Header.vue';
import User from '@/views/User.vue'

export default {
  name: 'Home',
  components: {
    Aside,
    Header,
    User
  },
  data() {
    return {
      isCollapse: false,
      sideWidth: 200,
      headerBg: 'headerBg',
      user: {}
    }
  },
  created() {
    console.log(this.tbImagerl)

  },
  methods: {
    collapse() {//左侧菜单栏伸缩
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.sideWidth = 64;
      } else {
        this.sideWidth = 200;
      }
    }
  }
}
</script>
<style>
.headerBg {
  background-color: red;
}
</style>